<template>
	<view class="cont">
		<view class="text-ss margin-bottom-xs">订单编号：{{detail.order_sn}}</view>
		<view class="text-ss">购买时间：{{detail.pay_at}}</view>
		<view class="card">
			<view class="text-lg text-cut margin-bottom-xs">{{detail.title}}</view>
			<view class="text-lg margin-bottom-xs"> <text class="text-bold">x</text> {{detail.stock}}</view>
			<view class="flex justify-between align-center">
				<text class="text-lg" style="color: #FC4E11;">￥{{detail.price}}</text>
			</view>
		</view>
		<view class="desc flex flex-direction align-center padding-tb solid-bottom margin-bottom-lg">
			<view class="text-ss text-bold margin-bottom">· 券码使用信息 ·</view>
			<block v-for="(item, index) in detail.card" :key="index">
				<view class="flex align-center margin-bottom-sm">
					<text class="text-ss text-bold">劵码号：</text>
					<text class="text-df">{{item.discern_code ? item.discern_code : item.code ? item.code : '暂无券码号'}}</text>
				</view>
			</block>
			<button v-if="detail.card[0].img" @click="onLookPicture" class="cu-btn bg-green radius shadow-blur margin-bottom-lg">查看券码图片</button>
			<block v-if="detail.status == 1">
				<view class="flex text-df">
					<text>自动完成订单时间：</text>
					<text style="color: #FC4E11;">{{timeData.h}}小时{{timeData.m}}分钟{{timeData.s}}秒</text>
				</view>
			</block>
			<block v-if="detail.status == 2">
				<view class="text-df text-gray">已完成</view>
			</block>
			<block v-if="detail.status == 3">
				<view class="text-df text-orange">售后处理中</view>
			</block>
		</view>
		<view class="prompt">
			<rich-text :nodes="describe"></rich-text>
			<!-- <prompt title="卡券描述" :cont="prompt"></prompt>
			<prompt title="使用时间" cont="周末、法定节假日通用（07:00~22:30）"></prompt>
			<prompt title="使用规则" cont="预约提示：无需预约，直接消费（高峰期间消费需排号等位）"></prompt>
			<prompt title="使用门店" cont="西安市全城哈根达斯所有门店"></prompt> -->
		</view>
		<block v-if="detail.status == 1">
			<bottom-bar buttonText="完成订单" @submit="onSubmit">
				<view 
					@click="doDall(detail.service)"
					class="bg-white flex-sub text-green flex align-center justify-center text-xl"
					style="height: 100%;"
					>提交纠纷</view>
			</bottom-bar>
		</block>
		
		<buy-hint ref="isBuyHintPopup" top="50" title="提示">
			<view class="text-gray text-center">
				是否确定完成订单？
			</view>
			<view class="flex justify-between margin-top-lg">
				<view style="width: 200rpx;" @click="()=> this.$refs.isBuyHintPopup.close()" class="margin-lr cu-btn round shadow-blur bg-orange">取消</view>
				<view style="width: 200rpx;" @click="onBtn" class="margin-lr cu-btn round shadow-blur bg-green">确定</view>
			</view>
		</buy-hint>
		
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	import { countTime, alert, toast } from "@/utils/util.js"
	import Prompt from "@/components/Prompt.vue"
	import BottomBar from "@/components/BottomBar.vue"
	import BuyHint from "@/components/BuyHint.vue"
	import orderApi from "@/Api/Order.js"
	
	export default {
		components: {
			Prompt,
			BottomBar,
			BuyHint
		},
		data() {
			return {
				describe: null,
				loading: true,
				id: null,
				timeData: null,
				detail: null
			};
		},
		filters: {
			filterCont(cont) {
				if(cont) {
					return cont.replace(/\<img/gi, '<img style="max-width: 100%;" ')
				} else {
					return ''
				}
		  }
		},
		onLoad(obj) {
			this.id = obj.id
			this.getDetail()
		},
		methods: {
			getDetail(){
				orderApi.getOrderDetail(this.id)
					.then(res=> {
						this.detail = res
						this.describe = this.filterCont(res.describe) 
						if(res.status == 1) this.startTimeTrial(res.completion_time_unix)
						this.loading = false
					})
					.catch(err => alert(err).then(() => setTimeout(() => uni.navigateBack(), 300)))
			},
			startTimeTrial(completion_time) {
				let time = completion_time * 1000
				this.fnCountTime(time)
				this.IntervalcountTime = setInterval(()=> this.fnCountTime(time),1000)
			},
			fnCountTime(time) {
				let timeData = countTime(time)
				this.timeData = timeData
				if (timeData.state) {
				  clearInterval(this.IntervalcountTime)
				  this.IntervalcountTime = null
				}
			 },
			 
			 onSubmit() {
					this.$refs.isBuyHintPopup.show()
			 },
			 
			 onBtn() {
				 this.showLoading('提交中')
				 orderApi.getUpData(this.id)
				 	.then((res)=> {
						this.hideLoading()
						this.$refs.isBuyHintPopup.close()
						toast( '提交成功','success')
						setTimeout(()=> uni.navigateBack() ,1000)
					})
			 },
							
			 onLookPicture() {
			 	uni.previewImage({
			 		urls: this.detail.card.map(item=>{
						return item.img
					})
			 	})
			 },
			 doDall(phoneNumber) {
				 uni.makePhoneCall({
				 	phoneNumber
				 })
			 },
			 filterCont(cont) {
			 	if(cont) {
			 		return cont.replace(/\<img/gi, '<img style="max-width: 100%;" ')
			 	} else {
			 		return ''
			 	}
			 }
		},
		onHide() {
			clearInterval(this.IntervalcountTime)
			this.IntervalcountTime = null
		},
		onUnload() {
			clearInterval(this.IntervalcountTime)
			this.IntervalcountTime = null
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.cont{
		padding: 20rpx 40rpx;
		.card{
			margin-top: 30rpx;
			padding: 30rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 10px 30px 0 rgba(0,0,0,0.10);
		}
	}
</style>
